<script setup>
import useCityStore from '@/stores/modules/city'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 绑定搜索框
const searchValue = ref()

// 点击取消
const router = useRouter()
const handleCancelClick = () => {
  router.back()
}

// tab的值
const tabActiveValue = ref()

// 请求城市数据
const list1 = [
  '#',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'J',
  'K',
  'L',
  'M',
  'N',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'W',
  'X',
  'Y',
  'Z',
]
const list2 = [
  '#',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'W',
  'X',
  'Y',
  'Z',
]
const cityStore = useCityStore()
cityStore.fetchAllCitiesData()
const { allCities, currentCity } = storeToRefs(cityStore)

// 点击选中城市
const handleCityClick = (cityName) => {
  currentCity.value.cityName = cityName
  router.back()
}
</script>

<template>
  <div class="city">
    <!-- 1.搜索栏 -->
    <van-search
      v-model="searchValue"
      shape="round"
      show-action
      @cancel="handleCancelClick"
      placeholder="城市/区域/位置"
    />
    <!-- tab栏切换 -->
    <van-tabs v-model:active="tabActiveValue">
      <template v-for="(value, key, index) in allCities" :key="key">
        <!-- 遍历生成tab结构 -->
        <van-tab :title="value.title" :name="key">
          <van-index-bar :sticky="false" :index-list="key === 'cityGroup' ? list1 : list2">
            <van-index-anchor index="热门" />
            <!-- 热门城市 -->
            <div class="hotCities">
              <div class="hotCities-list">
                <template v-for="cityitem in value.hotCities" :key="cityitem.cityId">
                  <div class="hotCities-city" @click="handleCityClick(cityitem.cityName)">
                    {{ cityitem.cityName }}
                  </div>
                </template>
              </div>
            </div>
            <!-- 遍历生成城市组别 -->
            <template v-for="(item, index) in value.cities" :key="index">
              <van-index-anchor :index="item.group" />
              <!-- 遍历生成城市列表 -->
              <template v-for="item2 in item.cities" :key="item2.cityId">
                <van-cell :title="item2.cityName" @click="handleCityClick(item2.cityName)" />
              </template>
            </template>
          </van-index-bar>
        </van-tab>
      </template>
    </van-tabs>
  </div>
</template>

<style lang="less" scoped>
.city {
  --van-search-left-icon-color: #ff9854;
  --van-tab-text-color: #646566;
  --van-tab-active-text-color: #323233;
  --van-font-bold: 400;

  :deep(.van-tabs__line) {
    background-color: #ff9854;
  }
  :deep(.van-tabs__content) {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }

  .hotCities {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #323233;
    .hottitle {
      height: 32px;
    }
    .hotCities-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .hotCities-city {
        width: 70px;
        height: 28px;
        border-radius: 14px;
        font-size: 12px;
        color: #000;
        text-align: center;
        line-height: 28px;
        background-color: #fff4ec;
        margin: 6px 0;
      }
    }
  }
}
</style>
